<template>
    <div class="works">
      <van-nav-bar
        title="我的作品"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="onClickRight"
      />
      <van-tabs v-model="active" animated>
        <van-tab title="视频">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div class="works-video">
                <div class="works-video__item" v-for="item in list" :key="item.id" :style="{backgroundImage: `url(${item.thumb})`}">
                  <div class="works-video__views">
                    <van-icon class-prefix="fa fa-play-circle-o" size="20" color="#EEF3F9" />
                    <span style="color: #EEF3F9">{{ item.status === 2 ? item.view_num_str : '审核中' }}</span>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="图文">
          <van-pull-refresh v-model="refreshing1" @refresh="onRefresh1">
            <van-list
              v-model="loading1"
              :finished="finished1"
              finished-text="没有更多了"
              @load="onLoad1"
            >
              <van-cell v-for="item in list1" :key="item.id" :title="item.title" :value="item.mtime" is-link>
                <template #label>
                  <div class="van-multi-ellipsis--l3">{{ item.content }}</div>
                </template>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
export default {
    name: 'works',
    data () {
        return {
            active: 0,
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            list1: [],
            loading1: false,
            finished1: false,
            refreshing1: false,
            page: 0,
            page1: 0
        }
    },
    methods: {
        onLoad () {
            this.$http.video.publishedList({
                page: this.refreshing ? this.page = 1 : this.page += 1
            }).then(({ code, data }) => {
                if (this.refreshing) {
                    this.list = []
                    this.refreshing = false
                }
                if (code === 200) {
                    if (data.total_page === 0 || data.total_page === data.current_page) {
                        this.finished = true
                    }
                    if (data.current_page === 1) {
                        this.list = data.list
                    } else {
                        this.list = this.list.concat(data.list)
                    }
                }
                this.loading = false
            })
        },
        onRefresh () {
            // 清空列表数据
            this.finished = false

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true
            this.onLoad()
        },
        onLoad1 () {
            this.$http.article.publishedList({
                page: this.refreshing1 ? this.page1 = 1 : this.page1 += 1
            }).then(({ code, data }) => {
                if (this.refreshing1) {
                    this.list1 = []
                    this.refreshing1 = false
                }
                if (code === 200) {
                    if (data.total_page === 0 || data.total_page === data.current_page) {
                        this.finished1 = true
                    }
                    if (data.current_page === 1) {
                        this.list1 = data.list
                    } else {
                        this.list1 = this.list1.concat(data.list)
                    }
                }
                this.loading1 = false
            })
        },
        onRefresh1 () {
            // 清空列表数据
            this.finished1 = false

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading1 = true
            this.onLoad1()
        },
        onClickRight () {}
    }
}
</script>

<style lang="scss" scoped>
.works {
  &-video {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2PX 2PX;
    &__item {
      height: 180px;
      background-size: cover;
      background-position: center center;
      position: relative;
      padding: 10px;
      display: flex;
      align-items: flex-end;
    }
    &__views {
      display: flex;
      align-items: center;
      i {
        margin-right: 5px;
      }
    }
  }
}
</style>
